<template>
	<view class="content">
		<div class="post-list">
			<div class="post-list-i" v-for="item in postlist" :key="item.id">
				<div class="post-list-l">
					<div class="post-list-title">{{item.title}}</div>
					<div class="post-list-info">
						<text>{{item.author}} 阅读量:{{item.readnum}}</text>
					</div>
				</div>
				<div class="post-list-r" v-if="item.pic">
					<image :src="item.pic" mode="aspectFill"></image>
				</div>
				
			</div>
		</div>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				postlist:[
					{
						id:2,
						title:'全国新增新冠肺炎确诊病例3887例 累计死亡490例',
						author:'消毒乐官方团队',
						authorid:1,
						info:'',
						pic:'https://cms-bucket.ws.126.net/2020/0205/ea6cbfbdp00q57i4j00lyc000s600e3c.png?imageView&thumbnail=234y146&quality=45&interlace=1&enlarge=1',
						readnum:50
					},
					{
						id:3,
						title:'武汉病毒所：已将瑞得西韦申报中国发明专利',
						author:'消毒乐官方团队',
						authorid:1,
						info:'',
						pic:'',
						readnum:32
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
.content{
	font-size:26rpx;
	font-weight:400;
	color:rgba(51,51,51,1);
	background-color: rgb(236,242,254);
	min-height: 100vh;
}
.post-list-i{
	padding: 20rpx;
	background-color: #FFFFFF;
	display: flex;
	border-bottom: 1px solid #eee;
	.post-list-l{
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		.post-list-title{
			min-height: 60rpx;
			max-height: 87rpx;
			overflow: hidden;
			line-height: 43.5rpx;
			font-size: 32.64rpx;
			display: -webkit-box;
			text-overflow: ellipsis;
			-webkit-line-clamp: 2;
			word-break: break-word;
		}
	}
	.post-list-r{
		width: 220rpx;
		height: 140rpx;
		margin-left: 30rpx;
		image{
			width: 100%;
			height: 100%;
		}
	}
}


</style>
